<template>
	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
		<view class="uni-popup__mask" :class="[ani+'-mask', animation ? 'mask-ani' : '']" />
		<view class="uni-popup__wrapper" :class="[type,ani+'-content', animation ? 'content-ani' : '']">
			<!-- <view class="demo-look" @click="handleDemo">
				<u-icon name="file-text" color="#fff" size="30"></u-icon>
				样板预览
			</view> -->
			
			<view v-if="!isCodeShow" class="bulletModal">
				<view class="content">
					<!-- 支付 -->
					<view class="pay-list">
						<view class="price-content">
							<view v-for="(item,index) of options" :key="item.id" class="price-item" :class="index==options.length-1?'price-item-last':''">
								<view class="prices"> <text class="price">{{item.price}}</text>  元</view>
								<view class="title">{{item.name}}</view>
								<view class="pay-btn" @click="handlePay(item)" :class="'pay-btn'+index">支付</view>
							</view>
						</view>
					</view>
					
					<!-- 开通会员 -->
					<view class="content-user">
						<view class="content-tips">
							<image :src="avatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"/>
							<!-- <image src="@/pages/toolbox/static/image/toolbox/avatr.png"/> -->
							<view class="content-tips-txt">
								开通<text class="content-tips-bold">会员</text>, </br>
								查看全部数据，</br>
								让时间发挥最大的价值！</br>
							</view>
						</view>
						
						<!-- 社群码和激活码 -->
						<view class="content-code" v-if="popupsVal==1">
							<view class="content-code-txt">
								或者加入学长<text class="content-code-bold">微信群</text></br>
								领取<text class="content-code-bold">激活码</text>！</br>
								还有机会获得个性化学习规划</br>
							</view>
							<img :src="community"/>
						</view>
						<view v-if="popupsVal==1" class="code-btn" @click="handleUseCode">激活码支付</view>
					</view>
				</view>
								
				<!-- 关闭按钮 -->
				<view class="close-icon" :class="popupsVal==1?'':'close-icon-codenull'" >
					<uni-icons type="clear" size="40" color="#fff" @click="close"></uni-icons>
				</view>
				
			</view>
					
			<!-- 激活码输入 -->
			<view class="codeModal codeModals" v-else>
				<view>
					<input class="code-input" placeholder="请输入激活码" v-model="code" placeholder-class="placeholderClass"/>
					<view class="btns">
						<view class="cancle-btn" @click="closePay">取消</view>
						<view class="confirm-btn" @click="handleCodeConfirm">确认</view>
					</view>
				</view> 
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import { ApimemberPrice,useActivationCode} from '@/api/index.js'
	// import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	// import QRCode from 'qrcodejs2';
	// var jWeixin = require('jweixin-module') 
	export default {
		name: 'pay-popup',
		components: {
			// QRCode,
		},
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			//跳转页面路径
			jumpUrl: {
				type: String,
				default: ''
			},
			// 弹窗 1、有社群码的弹窗，0、普通弹窗
			popupsVal: {
				type: String,
				default: 0
			},
			
			// 社群二维码
			community: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				avatar: '',
				ani: '',
				codeUrl: '',
				orderId: '',
				isCodeShowPay:false,
				showPopup: false,
				defaultOptions: {
					isVisible: false,       //是否显示弹窗
				},
				opts: {},
				// show: false,
				options: [],
				isCodeShow: false, //是否显示激活码输入框
				code: '',
				payData: {},
			}
		},
		created(){
			this.avatar = uni.getStorageSync('userInfo').avatar;
		},
		watch: {
			show(newValue) {
				this.isCodeShow = false;
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},

		methods: {
			clear() {},
			open() {
				this.handlePrice();
				this.isCodeShowPay = false;
				// this.$refs.popupCode.close();
				this.$emit('change', {
					show: true
				})
				this.showPopup = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 100)
				})
			},
			
			close(type) {
				if (!this.maskClick && type) return
				// this.$emit('change', {
				// 	show: false
				// })
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false;
					}, 300)
				})
				
				this.$emit('pageFun','false');
			},
			
			closePay(){
				this.isCodeShow = false;
				this.isCodeShowPay = false;
			},
			// 用户使用激活码
			handleUseCode(){
				this.code = '';
				this.isCodeShow = true;
			},
			handleCodeConfirm(){
				if(!this.code){
					uni.showToast({title: '请输入激活码', icon: 'none'});
					return
				}
				let params={
					code: this.code,
					h5Userid: uni.getStorageSync('userId')
				}
				useActivationCode(params).then(res=>{
					if(res.code != 100000){
						uni.showToast({title: res.msg, icon: 'none'});
						return;
						// this.close()
					}
					if(this.jumpUrl){
						uni.navigateTo({
							url: this.jumpUrl
						})
						return
					}
					this.close();
				})
			},
			// 样板预览
			handleDemo(){
				uni.navigateTo({
					url: this.jumpUrl+'&isDemo=1'
				})
			},
			
			// 会员价格
			handlePrice(){
				ApimemberPrice().then(res=>{
					if(res.code == 100000){
						this.options = res.data;
					}
				})
			},			
			// 支付
			handlePay(item) {
				let query = {
					type: 5,
					money: item.price,
					id: item.id
				}
				uni.navigateTo({
					url: '/pages/order/order?query='+JSON.stringify(query)
				})
			},	
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup {
		position: fixed;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		z-index: 99;
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		opacity: 0;
	}

	.mask-ani {
		transition-property: opacity;
		transition-duration: 0.2s;
	}

	.uni-top-mask {
		opacity: 1;
	}

	.uni-bottom-mask {
		opacity: 1;
	}

	.uni-center-mask {
		opacity: 1;
	}

	.uni-popup__wrapper {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
	}

	.top {
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(-500px);
	}

	.bottom {
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(500px);
	}

	.center {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0;
	}

	.uni-popup__wrapper-box {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
	}

	.content-ani {
		// transition: transform 0.3s;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
	}


	.uni-top-content {
		transform: translateY(0);
	}

	.uni-bottom-content {
		transform: translateY(0);
	}

	.uni-center-content {
		transform: scale(1);
		opacity: 1;
	}
	
	
	.bulletModal{
		color: #ffffff;
		// position: absolute;
		// z-index: 999;
		// width: 100%;
		// height: 100%;
		// background: rgba(51,51,51,0.8);
			
			
		.content{
			.content-user{
				margin: auto;
				.content-tips{
					background: rgba(247, 221, 94, 1);
					width: 580rpx;
					height: 220rpx;
					border-top-right-radius: 80rpx;
					border-top-left-radius: 80rpx;	
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333;
					
					image{
						width: 190rpx;
						height: 176rpx;
						border-radius: 50%;
						margin: 0 20rpx;
					}
					.content-tips-txt{
						font-size: 28rpx;
						font-weight: 400;
						line-height: 56rpx;
						font-style: normal;
						letter-spacing: normal;
						word-wrap: break-word;
						text-transform: none;
						
						.content-tips-bold{
							font-weight: 700;
							font-size: 40rpx;
							color: #333!important;
						}
					}
				}
				
				.content-code{
					margin-top: 180rpx;
					padding-top: 68rpx;
					
					width: 580rpx;
					height: 480rpx;
					background: rgba(247, 221, 94, 1);
					border-bottom-right-radius: 80rpx;
					border-bottom-left-radius: 80rpx;
					text-align: center;
					img{
						width: 220rpx;
						height: 220rpx;
					}
					
					.content-code-txt{
						line-height: 56rpx;
						font-size: 28rpx;
						font-style: normal;
						color: #333;
						letter-spacing: normal;
						.content-code-bold{
							color: #333;
							font-weight: 700;
							font-size: 40rpx;
						}
					}
					
				}
				
				.code-btn{
					width: 224rpx;
					height: 80rpx;
					border-radius: 8rpx;
					background: rgba(245, 154, 35, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 3rpx 6rpx 6rpx rgba(215,215,215,0.35);
					position: absolute;
					margin-left: 192rpx;
					margin-top: -20rpx;
					
				}
			}
			
			.pay-list{
				width: 656rpx;
				height: 188rpx;
				background: #ffffff;
				border-bottom-right-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				color: #333333;
				position: absolute;
				margin-top: 216rpx;
				margin-left: -40rpx;
				.price-content{
					display: flex;
					align-items: center;
					justify-content: space-around;
					
					
					.price-item{
						width: 236rpx;
						text-align: center;
						border-right: 1px dashed #b9b3b3;
						margin-top: 40rpx;
					}
					.price-item-last{
						border: none;
					}
					.prices,.title{
						text-align: center;
						line-height: normal;
						font-weight: 400;
						font-style: normal;
						font-size: 26rpx;
						letter-spacing: normal;
						color: #333333;
							
						.price{
							font-weight: 700;
							font-size: 36rpx;
							color: #F59A23;
						}
					}
					.title{
						margin-top: 20rpx
					}
					.pay-btn{
						width: 156rpx;
						height: 70rpx;
						background: rgba(245, 154, 35, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 700;
						font-style: normal;
						font-size: 28rpx;
						color: #FFFFFF;
						border-radius: 8rpx;
						box-shadow: 6rpx 6rpx 6rpx rgba(215,215,215,0.35);
						
						position: absolute;
						margin-top: 24rpx;
						margin-left: 40rpx;
					}
					
					.pay-btn0{
						margin-left: 56rpx;
					}
					.pay-btn1{
						margin-left: 34rpx;
					}
					.pay-btn2{
						margin-left: 8rpx;
					}
				}	
			}
		}
		
		
		.close-icon{
			// background: #ffffff;
			width: 52rpx;
			height: 48rpx;
			border-radius: 50%;
			margin: 100rpx auto 0;
			img{
				width: 52rpx;
				height: 48rpx;
				cursor: pointer;
			}
		}
		
		.close-icon-codenull{
			margin: 300rpx auto 0;
		}
		
	}
	
	// 激活码弹窗
	.codeModal{
		width: 570rpx;
		height: 374rpx;
		border-radius: 26rpx;
		// text-align: center;
		background-color: #FFFFFF;
		
		.code-input{
			height: 100rpx;
			border: 1px solid rgba(242, 242, 242, 1);
			border-radius: 12rpx;
			margin: 64rpx 36rpx;	
			font-weight: 400;
			font-style: normal;
			font-size: 26rpx;
			letter-spacing: normal;
			padding-left: 20rpx;
			color: #333333;
		}
		.placeholderClass{
			    color: #555555;
		}
		.btns{
			display: flex;
			justify-content: center;
			.cancle-btn,.confirm-btn{
				width: 216rpx;
				height: 80rpx;
				box-shadow: none;
				border: none;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				font-style: normal;
				letter-spacing: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.cancle-btn{
				color:rgba(247, 221, 94, 1);
				background-color:rgba(247, 221, 94, 0.2);
			}
			.confirm-btn{
				margin-left: 20rpx;
				color: #333;
				background-color: rgba(247, 221, 94, 1);
			}
		}
	}
	
	.codeModals{
		padding-top: 20rpx;
	}
	.payCode{
		text-align: center;
		padding: 40rpx 0;
		height: 400rpx;
		
		.tips-code{
			color: #333333;
			font-size: 15px;
			margin: 20rpx 0 60rpx
		}
	}
	
	
	.demo-look{
		position: absolute;
		font-size: 28rpx;
		color: #fff;
		font-weight: 400;
		font-style: normal;
		right: 64rpx;
		top: 50rpx;
		display: flex;
		align-items: center;
		background-color: #F59A23;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		img{
			width: 52rpx;
			height: 52rpx;
			mix-blend-mode: multiply;
			margin-right: 8rpx;
		}
	}
	
</style>
